<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>康复训练 - 脊柱健康监测系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            box-shadow: 0 0 30px rgba(0,0,0,0.1);
            border-radius: 10px;
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header .subtitle {
            font-size: 1.2em;
            opacity: 0.9;
            margin-bottom: 20px;
        }

        .nav {
            background: #34495e;
            padding: 0;
        }

        .nav-list {
            display: flex;
            list-style: none;
            justify-content: center;
            flex-wrap: wrap;
        }

        .nav-item {
            margin: 0;
        }

        .nav-link {
            display: block;
            color: white;
            text-decoration: none;
            padding: 15px 25px;
            transition: background 0.3s ease;
            border-radius: 0;
        }

        .nav-link:hover {
            background: #3498db;
        }

        .nav-link.active {
            background: #e74c3c;
        }

        .content {
            padding: 40px 30px;
        }

        .training-overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .overview-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .overview-card .icon {
            font-size: 2.5em;
            margin-bottom: 15px;
        }

        .overview-card .value {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .overview-card .label {
            font-size: 1em;
            opacity: 0.9;
        }

        .training-schedule {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .schedule-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .schedule-title {
            font-size: 1.5em;
            color: #2c3e50;
        }

        .schedule-date {
            color: #7f8c8d;
            font-size: 1em;
        }

        .training-list {
            display: grid;
            gap: 20px;
        }

        .training-item {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            border-left: 4px solid #3498db;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .training-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }

        .training-item.completed {
            border-left-color: #27ae60;
            background: #d5f4e6;
        }

        .training-item.in-progress {
            border-left-color: #f39c12;
            background: #fef9e7;
        }

        .training-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .training-name {
            font-size: 1.2em;
            font-weight: bold;
            color: #2c3e50;
        }

        .training-status {
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.9em;
            font-weight: 500;
        }

        .status-completed {
            background: #27ae60;
            color: white;
        }

        .status-in-progress {
            background: #f39c12;
            color: white;
        }

        .status-pending {
            background: #95a5a6;
            color: white;
        }

        .training-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }

        .detail-item {
            text-align: center;
        }

        .detail-label {
            font-size: 0.9em;
            color: #7f8c8d;
            margin-bottom: 5px;
        }

        .detail-value {
            font-size: 1.1em;
            font-weight: bold;
            color: #2c3e50;
        }

        .training-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.9em;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #2980b9 0%, #1f5f8b 100%);
            transform: translateY(-1px);
        }

        .btn-success {
            background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
            color: white;
        }

        .btn-success:hover {
            background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
            transform: translateY(-1px);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
            color: white;
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, #7f8c8d 0%, #6c7b7d 100%);
            transform: translateY(-1px);
        }

        .video-section {
            background: #2c3e50;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            text-align: center;
        }

        .video-player {
            width: 100%;
            height: 300px;
            background: #34495e;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2em;
            margin-bottom: 20px;
        }

        .video-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .progress-section {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
        }

        .progress-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
        }

        .progress-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .progress-item {
            background: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .progress-item .value {
            font-size: 2em;
            font-weight: bold;
            color: #3498db;
            margin-bottom: 10px;
        }

        .progress-item .label {
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .achievements {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .achievement-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
        }

        .achievement-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .achievement-item {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            border-left: 4px solid #f39c12;
        }

        .achievement-item.unlocked {
            border-left-color: #27ae60;
            background: #d5f4e6;
        }

        .achievement-icon {
            font-size: 2em;
            margin-bottom: 10px;
        }

        .achievement-name {
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 5px;
        }

        .achievement-desc {
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .footer {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 50px;
        }

        @media (max-width: 768px) {
            .content {
                padding: 20px 15px;
            }
            
            .nav-list {
                flex-direction: column;
            }
            
            .training-details {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🏃 康复训练</h1>
            <p class="subtitle">个性化康复训练计划与指导</p>
        </header>

        <nav class="nav">
            <ul class="nav-list">
                <li class="nav-item"><a href="index.html" class="nav-link">🏠 首页</a></li>
                <li class="nav-item"><a href="posture-detection.html" class="nav-link">📷 姿势识别</a></li>
                <li class="nav-item"><a href="rehabilitation.html" class="nav-link active">🏃 康复训练</a></li>
                <li class="nav-item"><a href="pain-record.html" class="nav-link">📊 疼痛记录</a></li>
                <li class="nav-item"><a href="data-analysis.html" class="nav-link">📈 数据分析</a></li>
                <li class="nav-item"><a href="doctor-portal.html" class="nav-link">👨‍⚕️ 医护端</a></li>
            </ul>
        </nav>

        <main class="content">
            <div class="training-overview">
                <div class="overview-card">
                    <div class="icon">📅</div>
                    <div class="value">3/5</div>
                    <div class="label">今日完成训练</div>
                </div>
                <div class="overview-card">
                    <div class="icon">⏱️</div>
                    <div class="value">25</div>
                    <div class="label">累计训练分钟</div>
                </div>
                <div class="overview-card">
                    <div class="icon">🔥</div>
                    <div class="value">7</div>
                    <div class="label">连续训练天数</div>
                </div>
                <div class="overview-card">
                    <div class="icon">🏆</div>
                    <div class="value">85%</div>
                    <div class="label">训练完成率</div>
                </div>
            </div>

            <div class="training-schedule">
                <div class="schedule-header">
                    <h2 class="schedule-title">📋 今日训练计划</h2>
                    <div class="schedule-date">2024年1月15日</div>
                </div>
                
                <div class="training-list">
                    <div class="training-item completed">
                        <div class="training-header">
                            <div class="training-name">颈椎拉伸训练</div>
                            <div class="training-status status-completed">已完成</div>
                        </div>
                        <div class="training-details">
                            <div class="detail-item">
                                <div class="detail-label">时长</div>
                                <div class="detail-value">10分钟</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">强度</div>
                                <div class="detail-value">中等</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">完成时间</div>
                                <div class="detail-value">09:30</div>
                            </div>
                        </div>
                        <div class="training-actions">
                            <button class="btn btn-secondary">查看详情</button>
                        </div>
                    </div>

                    <div class="training-item completed">
                        <div class="training-header">
                            <div class="training-name">腰部核心训练</div>
                            <div class="training-status status-completed">已完成</div>
                        </div>
                        <div class="training-details">
                            <div class="detail-item">
                                <div class="detail-label">时长</div>
                                <div class="detail-value">15分钟</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">强度</div>
                                <div class="detail-value">中等</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">完成时间</div>
                                <div class="detail-value">14:20</div>
                            </div>
                        </div>
                        <div class="training-actions">
                            <button class="btn btn-secondary">查看详情</button>
                        </div>
                    </div>

                    <div class="training-item in-progress">
                        <div class="training-header">
                            <div class="training-name">肩部放松训练</div>
                            <div class="training-status status-in-progress">进行中</div>
                        </div>
                        <div class="training-details">
                            <div class="detail-item">
                                <div class="detail-label">时长</div>
                                <div class="detail-value">8分钟</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">强度</div>
                                <div class="detail-value">低等</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">剩余时间</div>
                                <div class="detail-value">5分钟</div>
                            </div>
                        </div>
                        <div class="training-actions">
                            <button class="btn btn-primary" onclick="startTraining()">继续训练</button>
                            <button class="btn btn-success" onclick="completeTraining()">完成训练</button>
                        </div>
                    </div>

                    <div class="training-item">
                        <div class="training-header">
                            <div class="training-name">脊柱柔韧性训练</div>
                            <div class="training-status status-pending">待开始</div>
                        </div>
                        <div class="training-details">
                            <div class="detail-item">
                                <div class="detail-label">时长</div>
                                <div class="detail-value">12分钟</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">强度</div>
                                <div class="detail-value">中等</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">建议时间</div>
                                <div class="detail-value">18:00</div>
                            </div>
                        </div>
                        <div class="training-actions">
                            <button class="btn btn-primary" onclick="startTraining()">开始训练</button>
                        </div>
                    </div>

                    <div class="training-item">
                        <div class="training-header">
                            <div class="training-name">呼吸放松训练</div>
                            <div class="training-status status-pending">待开始</div>
                        </div>
                        <div class="training-details">
                            <div class="detail-item">
                                <div class="detail-label">时长</div>
                                <div class="detail-value">5分钟</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">强度</div>
                                <div class="detail-value">低等</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">建议时间</div>
                                <div class="detail-value">21:00</div>
                            </div>
                        </div>
                        <div class="training-actions">
                            <button class="btn btn-primary" onclick="startTraining()">开始训练</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="video-section">
                <h3 style="color: white; margin-bottom: 20px;">📺 训练视频指导</h3>
                <div class="video-player">
                    <div>
                        <div style="font-size: 3em; margin-bottom: 10px;">▶️</div>
                        <div>肩部放松训练视频</div>
                        <div style="font-size: 0.8em; opacity: 0.8; margin-top: 5px;">点击播放训练指导视频</div>
                    </div>
                </div>
                <div class="video-controls">
                    <button class="btn btn-primary" onclick="playVideo()">播放视频</button>
                    <button class="btn btn-secondary" onclick="pauseVideo()">暂停</button>
                    <button class="btn btn-success" onclick="fullscreen()">全屏</button>
                </div>
            </div>

            <div class="progress-section">
                <h2 class="progress-title">📊 训练进度统计</h2>
                <div class="progress-stats">
                    <div class="progress-item">
                        <div class="value">15</div>
                        <div class="label">本周训练次数</div>
                    </div>
                    <div class="progress-item">
                        <div class="value">120</div>
                        <div class="label">累计训练分钟</div>
                    </div>
                    <div class="progress-item">
                        <div class="value">7</div>
                        <div class="label">连续训练天数</div>
                    </div>
                    <div class="progress-item">
                        <div class="value">85%</div>
                        <div class="label">计划完成率</div>
                    </div>
                </div>
            </div>

            <div class="achievements">
                <h2 class="achievement-title">🏆 训练成就</h2>
                <div class="achievement-list">
                    <div class="achievement-item unlocked">
                        <div class="achievement-icon">🥇</div>
                        <div class="achievement-name">初学者</div>
                        <div class="achievement-desc">完成第一次训练</div>
                    </div>
                    <div class="achievement-item unlocked">
                        <div class="achievement-icon">🔥</div>
                        <div class="achievement-name">坚持者</div>
                        <div class="achievement-desc">连续训练7天</div>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-icon">💪</div>
                        <div class="achievement-name">力量训练师</div>
                        <div class="achievement-desc">完成50次力量训练</div>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-icon">🎯</div>
                        <div class="achievement-name">完美主义者</div>
                        <div class="achievement-desc">连续30天100%完成训练</div>
                    </div>
                </div>
            </div>
        </main>

        <footer class="footer">
            <p>&copy; 2024 脊柱健康监测与康复指导系统 | 智能健康管理平台</p>
        </footer>
    </div>

    <script>
        function startTraining() {
            alert('开始训练...\n请跟随视频指导进行训练');
        }

        function completeTraining() {
            alert('训练完成！\n恭喜您完成了本次训练');
        }

        function playVideo() {
            alert('开始播放训练视频...');
        }

        function pauseVideo() {
            alert('视频已暂停');
        }

        function fullscreen() {
            alert('进入全屏模式');
        }
    </script>
</body>
</html>
